<template>
    
    <div>
        这是首页内容
        <router-link to="/home">返回首页</router-link>
        <br />
        <router-link to="/home/role"
        >角色管理</router-link
        >
        <br />
        <router-link to="/home/user">用户管理</router-link>
        <router-view />

        <h1>Hello App!</h1>
    <p>
        <strong>Current route path:</strong> {{ $route.fullPath }}
    </p>
    <nav>
        <RouterLink to="/">返回首页</RouterLink> | 
        <RouterLink to="/home/user">用户二级页面(里面有三级页面)</RouterLink> | 
        <RouterLink to="/home/role">角色二级页面</RouterLink> | <br/>
        <RouterLink to="/home/setting">系统设置二级页面</RouterLink> | 
        <RouterLink to="/home/demo">示例二级页面</RouterLink> | 
    </nav>
    <main style="background-color: #ccc;">
        <RouterView />
    </main>
    </div>

</template>

<script>
import router from '@/router';
import { onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import {Fold} from '@element-plus/icons-vue'
export default {
    components: {
        Fold
    },
    setup () {
        
        const router = useRouter()
        const menus = reactive([
            {
                id: '1',
                path: '/setting',
                title: '系统设置',
            },
            // {
            //     id: '2',
            //     icon: '',
            //     title: '系统设置',
            //     router: '',
            //     Subclass: [
            //         {
            //             id: '2-1',
            //             path: '/home1',
            //             title: '人员管理',
            //             router: ''
            //         },
            //         {
            //             id: '2-2',
            //             path: '/home2',
            //             title: '角色管理',
            //             router: ''
            //         },
            //         {
            //             id: '2-3',
            //             path: '/home3',
            //             title: '资源管理',
            //             router: ''
            //         },
            //     ]  // 二级菜单
            // },
            {
                id: '3',
                path: '/useInfo',
                title: '使用说明'
            },
        ])

        const activeIndex = ref('1')


        const select = (index, path) => {
            console.log(index)
            console.log(path)
            localStorage.setItem('menuid', JSON.stringify(index))
        }

        onMounted(()=> {
            activeIndex.value = JSON.parse(localStorage.getItem('menuid'))
        })

        const logout = ()=>{
            localStorage.clear()
            router.push('/login')
        }

        const menuCollapse = ()=> {
            isCollapse.value = !isCollapse.value
            console.log(!isCollapse.value)
        }

        const isCollapse = ref(false)
        return {menus, activeIndex, select, logout, isCollapse, menuCollapse}
    }
}
</script>

<style lang="scss" scoped>

    .admin-menu {
        background-color: #191a23; 
        height: 100vh;
        .logo {
            height: 50px;
            align-items: center;
            justify-content: center;
            display: flex;
            background-color: #191a23;
            color: var(--ea-aside-text-color);
        }
    }
    
    .admin-header {
        padding: 0;
        height: 55px;
        line-height: 55px;
        border-bottom: 1px solid #ccc;
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        div:nth-child(1){
            width: 45px;
            height: 45px;
            cursor: pointer;
        }
        div:nth-child(2){
            
        }
        div:nth-child(3){
            text-align: right;
            padding-right: 15px;
        }
    }
</style>